<template>
	<div>
		<h1>动态组件</h1>
		<button @click="change">切换组件</button>
		<keep-alive>
			<component :is="dynamicCom"></component>
		</keep-alive>
	</div>

</template>

<script>
	import Demo1 from './components/demo1'
	import Demo2 from './components/demo2'
	export default {
		components: {
			Demo1,
			Demo2
		},
		data() {
			return {
				dynamicCom: 'Demo1' //注意值一定是字符串
			}
		},
		methods: {
			change() {
				this.dynamicCom = (this.dynamicCom == 'Demo1' ? 'Demo2' : 'Demo1')
			}

		},
	}
</script>

<style scoped>
</style>